<template>
  <div class="dis-flex test flex-col">
    <div class="flex-main">
      <div :class="{'layout-middle':true,'z6':['M'].includes(mobileView)}">
        <!-- 客户选择区 -->
        <customer-list @getUserMsg='setCusInfo'></customer-list>
        <!-- <div v-if="isDev" class="cusdev">{{activeCus}}</div> -->
      </div>
      <div :class="{'layout-right':true,'z6':['R'].includes(mobileView)}">
        <!-- 聊天对话区 -->
        <dialog-box></dialog-box>
      </div>
    </div>
    <el-row v-if="isMobile">
      <template v-for="(v,k) in arrMobileView">
        <el-col :span="24/arrMobileView.length" :key="k">
          <button type="button" :class="{
            btn:true,mobileBottomBtn:true,is1st:k==0,action:v.arg == mobileView
          }" @click="mobileView=v.arg">{{v.txt}}</button>
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		name: 'appCSchat',
    computed:{...mapState([
      'isMobile',
    ])},
		data() {
			return {
        isDev:process.env.NODE_ENV== 'development',
        mobileView:'M',
        arrMobileView:[
          {arg:'M',txt:'客户列表'},
          {arg:'R',txt:'客户对话'},
        ],
				activeCus:{
          value:{
            userId:0,
            nicheng:"",
            imgUrl:"",
            lastMsgId:0,
            isRead:true,
            type:0,
            msgBody:"",
            addTime:"",
          }//激活的客户列表，依赖注入传值给子组件使用
        },
			}
		},
		components:{
			'customerList':()=>{return import('./components/customerList.vue') },
			'dialogBox':()=>{return import('./components/dialogBox.vue') },
		},
		//依赖注入传值
		provide(){
      return{
        activeCus:this.activeCus,
      }
		},
		methods: {
      
      setCusInfo(cusInfo){
        this.$set(this.activeCus,'value',cusInfo)
      },//客户选择区传值
		}
	}
</script>

<style scoped lang="less">
@import url('../../assets/config.less');
.flex-main {
  display: flex;
  flex:1 0 auto;
  @llw:480;
  @lmw:560;
  .layout-middle{
    position: absolute;
    top:0;bottom:0;
    left:0;
    width:45%;
    height:100%;
  }
  .layout-right{
    position: absolute;
    top:0;bottom:0;
    right:0;
    width:55%;
    height:100%;
  }
  .layout-left,
  .layout-middle,
  .layout-right{
    @media (max-width:unit(@mobile,px)){
      top:0;bottom:0;
      left:0;right:0;
      width:100%;height:100%;
      background:#fff;
    }
  }
}
.mobileBottomBtn{
  font-size:unit(2.8,vw);
  line-height:unit(8.8,vw);
  width: 100%;
  border-left:1px solid #ccc;
  &.is1st{
    border-left:none;
  }
  &.action{
    background-color:darken(@blue,5%);
    color:#fff;
  }
}

</style>
